<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/css/base.css">
    <style>
        .my-btn{
            display: inline-block;
            background-color: cadetblue;
            color: white;
            padding: 6px 12px;
            border-radius: 6px;
            box-shadow: 0 0 2px cadetblue;
            cursor: pointer;
            user-select: none;
            margin: 4px;
        }
        .my-btn:hover{
            background-color: rgb(81, 134, 136);
        }
        .my-btn:active{
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        特性1(vue3)：子组件标签绑定事件的处理方式
            + 子组件标签上绑定的所有事件，都会被$attrs进行加载，如果属性被emits拦截，会从$attrs中删除；
            + 未被emits拦截的$attrs加载的标签事件，如果组件只有一个根元素，会直接定义在组件的根标签上；
            + 未被emits拦截的$attrs加载的标签事件，如果组件不止一个根元素，事件不在自动处理，
                    如果需要可以手动处理(使用v-bind="$attrs"进行绑定);

        特性2：自定义事件名的处理
            + 如果自定义事件名已连字符方式进行描述，$attrs会将事件转为驼峰写法 => 例如 v-on:update-msg => onUpdateMsg
            + 如果需要拦截事件，emits 取值既可以是 $attrs的驼峰事件名，也可以是组件标签定义的原始事件名，但需要在$emits触发时保持一致
        </pre>
        <h5>父组件</h5>
        <p>msg:{{ msg }}</p>
        <p>arr:{{ arr }}</p>
        <p>user:{{ user }}</p>

        <!-- 
            v-指令:参数.修饰符.修饰符……=取值
                指令的参数识别 => 只以第一个出现:作为参数识别，直到第一个.号或=截至
            例如 v-on:update:user="updateUser"  ==> 参数时 update:user
            如果是自定义事件 $attrs 记录为 onUpdate:user
        -->
        <my-comp 
            @test 
            @fun 
            @update-msg="updateMsg" 
            v-on:update-arr="updateArr"
            v-on:update:user="updateUser"
        ></my-comp>
        <my-comp2 @test @fun></my-comp2>
        <hr>
        <my-btn @click="showTip()"></my-btn>
    </div>

    <script type="text/x-template" id="myComp">
        <div class="cbox" itany="网博">
            <h5>子组件1</h5>
            <p>msg:{{ msg }}</p>
            <p>arr:{{ arr }}</p>
            <p>user:{{ user }}</p>
            <input type="button" value="发送msg" @click="sendMsg()">
            <input type="button" value="发送Arr" @click="sendArr()">
            <input type="button" value="发送User" @click="sendUser()">

        </div>
    </script>
    <script type="text/x-template" id="myComp2">
        <hr>
        <h5>子组件2</h5>
        <h5 v-bind="$attrs">子组件2-绑定事件</h5>
        <h5>子组件2</h5>
        <hr>
    </script>

    <script type="text/x-template" id="btn">
        <div class="my-btn">按钮</div>
    </script>

    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";

        const MyComp = {
            template:"#myComp",
            // emits:["test","UpdateArr"],
            emits:["test","update-arr","update:user"],
            data() {
                return {
                    msg: "子组件数据msg",
                    arr:[1,2,3,4,5],
                    user:{
                        name:"tom",
                        age:23
                    }
                }
            },
            methods: {
                sendMsg() {
                    this.$attrs.onUpdateMsg(this.msg)
                },
                sendArr(){
                    this.$emit("update-arr",this.arr)
                },
                sendUser(){
                    // 未拦截
                    // this.$attrs['onUpdate:user'](this.user)
                    // 拦截
                    this.$emit("update:user",this.user)
                }
            },
        }
        const MyComp2 = {
            template:"#myComp2",
            emits:["test"]
        }
        const MyBtn = {
            template:"#btn"
        }

        createApp({
            components: {
                MyComp,MyComp2,MyBtn
            },
            data() {
                return {
                    msg:"",
                    arr:[],
                    user:{}
                }
            },
            methods: {
                showTip() {
                    alert("按钮被点击")
                },
                updateMsg(e){
                    this.msg = e
                },
                updateArr(e){
                    this.arr = e
                },
                updateUser(e){
                    this.user = e
                }
            },
        }).mount("#app")
    </script>
</body>
</html>